<template>
    <div>
        <div id="logQuery" class="center_div">  <!--隐藏html-->
            <!------------------------------------顶部查询栏-------------------------------->


            <div class="searchForm" style="margin-top: 1%;margin-left: 1%;">
                <el-form :inline="true" :model="searchForm" :label-position="label_position">
                    <el-form-item v-if="false" label="归属部门" prop="fleetName">
                        <el-select v-model="form.fleetName" :placeholder="'请选择'" filterable>
                            <el-option :value="form.fleetName" style="height: auto">
                                <el-tree
                                        :load="loadChildren"
                                        highlight-current
                                        lazy
                                        node-key="id"
                                        :props="defaultProps"
                                        :filter-node-method="filterNode"
                                        ref="tree"
                                        @node-click="loadData">
                                            <span class="custom-tree-node dataManage18px"
                                                  slot-scope="{ node, data }">
                                            <span v-if="data.type===0"><img src="@/assets/images/mapicon/tree_fleet.png"
                                                                            class="treeLableImg">{{ node.label
                                              }}</span>
                                            <span v-if="data.type===1"><img src="@/assets/images/mapicon/tree_fleet.png"
                                                                            class="treeLableImg">{{ node.label
                                              }}</span>
                                        </span>

                                </el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="false" label="用户名" prop="name">
                        <el-input v-model="searchForm.dcId"></el-input>
                    </el-form-item>
                    <el-form-item label="操作类型">
                        <el-select v-model="searchForm.type"

                                   @change="changeType"
                        >
                            <el-option
                                    v-for="item in searchForm.typeOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作详细类型">
                        <el-select v-model="searchForm.detailType"

                        >
                            <el-option
                                    v-for="item in searchForm.detailTypeOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="开始时间">

                        <el-date-picker v-model="searchForm.startTime" type="datetime"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        style="width: 100%"
                                        placeholder="选择日期时间" :editable="false" :picker-options="pickerOptionsStart"
                                        @change="changeStart"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">

                        <el-date-picker v-model="searchForm.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                                        style="width: 100%"
                                        placeholder="选择日期时间" :editable="false" :picker-options="pickerOptionsEnd"
                                        @change="changeEnd"></el-date-picker>
                    </el-form-item>


                    <el-form-item>
                        <el-button class="queryBtn dataManageBtn22BtnpPx" type="primary" @click="querySearch">查询
                        </el-button>
                    </el-form-item>

                </el-form>
            </div>

            <!----------------------------------中间表格栏---------------------------------->
            <div class="table-wrap" style="width: 98%">
                <el-table
                        fit
                        :data="tableData"
                        class="tableDataClass"
                        border
                        cell-class-name="dataManage18px"
                        :header-cell-style="headerCellClassName"
                >

                    <el-table-column align="center" v-for="title in tableTitle" :prop="title.prop" :label="title.label"
                                     :width="title.width" show-overflow-tooltip="true">
                    </el-table-column>

                </el-table>
                <!---------------------------------- 分页---------------------------------->
                <el-pagination
                        layout="total,prev, pager, next"
                        background
                        @current-change="changePageNum"
                        :current-page="pageNum"
                        :page-size="pageSize"
                        :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
  import SubscriberManage from '@/api/dataManages/SubscriberManage';

  import AuditQuery from '@/api/dataManages//AuditQuery.js';

  export default {
    name: 'LogAuditManagement',
    props: {//父组件数据
      FleetId: Number,
      userId: Number,
      UserAccount: String,
    },

    data() {
      return {
        label_position: 'right',
        dataforms: [],
        rowsforms: [],
        dialogRecent: false,
        searchForm: {
          dcId: '',
          detailType: '',
          type: '',
          startTime: '',
          endTime: '',
          user: '',
          fleetName: '',
          detailTypeOptions: [],
          typeOptions: [
            {'name': '全部', 'id': 0}, {'name': '调度', 'id': 1}, {'name': '对讲', 'id': 2}, {'name': '会议', 'id': 3}, {
              'name': '广播通知',
              'id': 4,
            }, {'name': '系统管理', 'id': 5}],
        },
        pickerOptionsStart: {},
        pickerOptionsEnd: {},

        tableTitle: [
          // {label: '序号', prop: 'index'},
          {label: '操作者', prop: 'userName'},
          {label: '操作类型', prop: 'typeName'},
          {label: '详细操作类型', prop: 'detailTypeName'},
          {label: '操作描述', prop: 'describe'},
          {label: '操作状态', prop: 'status'},
          {label: '操作时间', prop: 'time', width: '320'},
        ],
        tableData: [],   //搜索结果
        subTypeOptions: [],

        total: 0,
        pageNum: 1,
        pageSize: 10,
        defaultProps: {
          label: 'name',
          isLeaf: 'isLeaf',
        },
        form: {
          subId: '',
          fleetName: '',
          fleetId: '',
          subType: '',
          mobileType: '',
          extNumber: '',
          name: '',
          number: '',
          password: '',
          isNeedLoc: 1,
          reportMode: 1,
          reportType: 2,
          circle: '',
        },

      };
    },
    created() {
      this.changeDmgPage();
    },
    mounted() {
      this.query();
    },
    methods: {
      querySearch() {
        this.query(1);
        this.pageNum = 1;
      },
      changeDmgPage() {
        let w = window.screen.width;
        let h = window.screen.height;
        if (w == 1920) {
          if (h == 1080) {
            this.pageSize = 7;
          } else {
            this.pageSize = 10;
          }
        }
      },
      headerCellClassName() {
        return 'font-size:18px;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB';
      },
      //表格样式
      cellStyleClassName() {
        return 'font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB';
      },
      changeType(val) {
        console.info('%c changeType=' + val, 'color:red');
        this.searchForm.detailType = '';

        this.queryDetailType(val);
      },
      changeStart() { // 限制开始时间
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.searchForm.startTime) {
              return time.getTime() < this.searchForm.startTime;
            }
          },
        });
      },

      changeEnd() { // 限制结束时间
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.searchForm.endTime) {
              return time.getTime() > (this.searchForm.endTime);
            }
          },
        });
      },
      query(pageNum) {
        var condition = {
          pageNum: pageNum,
          pageSize: this.pageSize,
          fleetId: this.form.fleetId || '',
          dcId: this.$store.getters.userNameForLog,
          // dcId: this.$store.getters.userAccount,
          detailType: this.searchForm.detailType,
          type: this.searchForm.type,
          startTime: this.searchForm.startTime,
          endTime: this.searchForm.endTime,
        };
        if (condition.starttime != '' && condition.starttime != null) {
          condition.starttime = this.GlobalFunc.GlaChangeDate(condition.starttime);
        }
        if (condition.endtime != '' && condition.endtime != null) {
          condition.endtime = this.GlobalFunc.GlaChangeDate(condition.endtime);
        }
        AuditQuery.queryLog(condition).then((res) => {
          if (res.success) {
            var data = res.obj.list;
            console.info('%c 11111', 'color:red');
            for (var i = 0; i < data.length; i++) {
              data[i].time = this.GlobalFunc.timeFormatRow(data[i].time);
            }
            console.info('%c 22222', 'color:red');

            this.tableData = data;
            this.total = res.obj.total;
          } else {
            this.$message('获取列表错误');
          }
          console.info('%c 获取sss列表成功' + this.total, 'color:red');
        }).catch(res => {
          console.info('%c 获取sss列表失败', 'color:red');
        });
      },
      queryDetailType(typeId) {
        var condtion = {
          typeId: typeId,
        };
        AuditQuery.queryDetailType(condtion).then((res) => {
          if (res.success) {
            var data = res.obj;
            data.push({'name': '全部', 'id': 0});
            this.searchForm.detailTypeOptions = data;
          } else {
            this.$message('获取详细操作类型错误');
          }
          console.info('%c 获取详细操作类型成功' + res, 'color:red');
        }).catch(res => {
          console.info('%c 获取详细操作类型失败', 'color:red');
        });
      },
      /**
       * 查询被叫对讲组
       * */
      queryGroup: function() {
        var condition = {
          'pageIndex': 1,
          'pageSize': 0,
          'type': 0,
          'fleetId': this.$store.getters.scsFleetId,
          'managePriv': this.$store.getters.managePriv,
          'userId': this.$store.getters.userId,
        };
        AuditQuery.queryGroup(condition).then((res) => {
          if (res.success) {
            var data = res.obj.userInfo;

            data.forEach(function(value) {
              value.NAME = value.name;
              value.NUMBER = value.uid;
            });

            data.push({'NAME': '全部', 'NUMBER': ''});
            this.searchForm.calledid.options = data;
            this.searchForm.groupOptions = data;

          } else {
            this.$message('获取群组请求错误');
          }
          console.info('%c 获取群组成功' + res, 'color:red');
        }).catch(res => {
          console.info('%c 获取失败', 'color:red');
        });

      },
      loadChildren(node, resolve) {

        if (node.data) {
          this.getChild(node.data.id, node.data.type, resolve);
        } else {
          setTimeout(() => {
            this.getChild(this.$store.getters.scsFleetId, 0, resolve);
          }, 0);
        }
      },
      getChild: function(id, type, resolve) {
        var jsonData = {
          parentId: id,
          type: type,
        };
        SubscriberManage.getFleet(jsonData).then(res => {
          res = res;
          if (res.success) {
            var childNodes = [];
            if (res.obj) {
              childNodes = res.obj;
            }
            resolve(childNodes);
          }
        }).catch(err => {
          // 异常情况
        });
      },
      filterNode: function(value, data) {
        if (!value)
          return true;
        else
          return data.name.indexOf(value) !== -1;
      },

      loadData: function(node) {
        this.form.fleetName = node.name;
        this.form.fleetId = node.id;
        this.getSubType(node.id);
        $('.el-select-dropdown').hide();

      },
      changePageNum: function(val) {
        this.pageNum = val;
        this.query(this.pageNum);
      },

    },
  };
</script>

<style scoped>
    /deep/ .el-form-item__label {
        font-size: 22px !important;
    }
    /deep/ .el-table  /deep/ .el-table__row /deep/ .cell {
        min-height: 45px!important;
        line-height: 45px;
    }
    /deep/ .el-input__inner {
        font-size: 22px !important;
    }

    .el-table-column--selection .cell {
        padding-right: 1px;
    }

    /*分页修改开始*/
    .el-pagination /deep/ .el-pagination__total {
        font-size: 20px;
        line-height: 60px;
    }

    .el-pagination /deep/ button /deep/ .el-icon .el-icon .el-icon-arrow-left {
        font-size: 50px;
        height: 60px;
        width: 40px;
    }

    /deep/ .el-pager li {
        margin-top: 15px;
        height: 60px;
        width: 60px;
        line-height: 60px;
        font-size: 18px;
    }

    /deep/ .el-pagination.is-background .btn-prev, .el-pager li {
        height: 60px;
        width: 60px;
    }

    /deep/ .el-pagination.is-background .btn-next, .el-pager li {
        height: 60px;
        width: 60px;
    }

    /deep/ .el-pagination .btn-prev .el-icon {
        font-size: 40px;
    }

    /deep/ .el-pagination .btn-next .el-icon {
        font-size: 40px;
    }

    /*分页修改结束*/


    #record .el-table__body-wrapper {
        overflow-y: auto !important;
    }

    @media (max-width: 1366px) {
        #record .el-table__body-wrapper .cell {
            padding-right: 0;
        }

    }

    .tableDataClass {
        width: 100%;
        height: 80%;
        text-align: center;
        border-left: 1px solid #EBEBEB;
        font-size: 16px
    }
</style>
